// 太阳能发电系统监控界面 - 统计数据页面脚本

// 初始化Vue应用
const vm = new Vue({
    el: '#app',
    data: {
      // 从全局数据获取
      lastUpdateTime: appData.lastUpdateTime,
      showAlert: appData.showAlert,
      alertMessage: appData.alertMessage,
      powerData: { ...appData.powerData },
      distributionData: { ...appData.distributionData },
      
      // 统计页面特定数据
      timeRange: 'day', // day, week, month, year
      
      // 图表实例
      hourlyChart: null,
      distributionChart: null,
      
      // 刷新计时器
      refreshInterval: null
    },
    computed: {
      // 计算环形进度条的周长
      progressCircumference() {
        return appMethods.calculateCircumference(54);
      },
      
      // 价格趋势样式
      trendClass() {
        return {
          'up': this.powerData.monthlyTrend > 0,
          'down': this.powerData.monthlyTrend < 0
        };
      }
    },
    methods: {
      // 更新最后更新时间
      updateLastUpdateTime() {
        this.lastUpdateTime = appMethods.updateLastUpdateTime();
      },
      
      // 计算环形进度条的偏移量
      getDashOffset(current, target) {
        return appMethods.calculateDashOffset(current, target, this.progressCircumference);
      },
      
      // 显示系统报警
      showSystemAlert(message) {
        appMethods.showSystemAlert(message);
        this.showAlert = appData.showAlert;
        this.alertMessage = appData.alertMessage;
      },
      
      // 确认报警
      acknowledgeAlert() {
        appMethods.acknowledgeAlert();
        this.showAlert = appData.showAlert;
      },
      
      // 更改时间范围
      changeTimeRange(range) {
        this.timeRange = range;
        
        // 根据时间范围更新图表数据
        this.updateCharts();
      },
      
      // 初始化小时发电图表
      initHourlyChart() {
        const ctx = document.getElementById('hourly-chart').getContext('2d');
        
        this.hourlyChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: this.powerData.hourlyData.map(item => item.hour),
            datasets: [{
              label: '每小时发电量(度)',
              data: this.powerData.hourlyData.map(item => item.value),
              borderColor: '#0077cc',
              backgroundColor: 'rgba(0, 119, 204, 0.1)',
              borderWidth: 2,
              tension: 0.4,
              fill: true,
              pointBackgroundColor: '#fff',
              pointBorderColor: '#0077cc',
              pointRadius: 4
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false
              },
              tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.7)'
              }
            },
            scales: {
              y: {
                beginAtZero: true,
                suggestedMax: this.powerData.maxHourlyValue * 1.2
              }
            }
          }
        });
      },
      
      // 初始化电力分配饼图
      initDistributionChart() {
        const ctx = document.getElementById('distribution-chart').getContext('2d');
        
        this.distributionChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ['家庭用电', '负载用电'],
            datasets: [{
              data: [this.distributionData.homePercent, this.distributionData.loadPercent],
              backgroundColor: ['#0077cc', '#00aa55'],
              borderWidth: 0
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '70%',
            plugins: {
              legend: {
                display: false
              },
              tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.7)'
              }
            }
          }
        });
      },
      
      // 更新图表数据
      updateCharts() {
        // 根据选择的时间范围生成不同的数据
        let labels = [];
        let values = [];
        
        switch(this.timeRange) {
          case 'day':
            // 使用原始小时数据
            labels = this.powerData.hourlyData.map(item => item.hour);
            values = this.powerData.hourlyData.map(item => item.value);
            break;
          case 'week':
            // 使用每周数据
            labels = this.powerData.weeklyData.map(item => '周' + item.day);
            values = this.powerData.weeklyData.map(item => item.value);
            break;
          case 'month':
            // 生成一个月的模拟数据
            labels = Array.from({length: 30}, (_, i) => `${i+1}日`);
            values = Array.from({length: 30}, () => (Math.random() * 5 + 2).toFixed(1));
            break;
          case 'year':
            // 生成一年的模拟数据
            labels = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
            values = Array.from({length: 12}, () => (Math.random() * 100 + 30).toFixed(1));
            break;
        }
        
        // 更新小时图表数据
        if (this.hourlyChart) {
          this.hourlyChart.data.labels = labels;
          this.hourlyChart.data.datasets[0].data = values;
          this.hourlyChart.options.scales.y.suggestedMax = Math.max(...values) * 1.2;
          this.hourlyChart.update();
        }
      },
      
      // 启动自动刷新
      startAutoRefresh() {
        // 每分钟刷新一次数据
        this.refreshInterval = setInterval(() => {
          this.updateLastUpdateTime();
          
          // 只在"天"视图时自动更新数据
          if (this.timeRange === 'day') {
            this.updateCharts();
          }
        }, 60000);
      },
      
      // 停止自动刷新
      stopAutoRefresh() {
        if (this.refreshInterval) {
          clearInterval(this.refreshInterval);
          this.refreshInterval = null;
        }
      }
    },
    mounted() {
      // 确保从localStorage加载最新设置
      appMethods.loadSettingsFromStorage();
      
      // 更新初始时间
      this.updateLastUpdateTime();
      
      // 初始化图表
      this.$nextTick(() => {
        this.initHourlyChart();
        this.initDistributionChart();
      });
      
      // 启动自动刷新
      if (appData.settingsData.autoRefresh) {
        this.startAutoRefresh();
      }
    },
    beforeDestroy() {
      // 清理定时器
      this.stopAutoRefresh();
      
      // 清理图表实例
      if (this.hourlyChart) {
        this.hourlyChart.destroy();
      }
      if (this.distributionChart) {
        this.distributionChart.destroy();
      }
    }
  });